<%--
  Created by IntelliJ IDEA.
  User: Georg
  Date: 3/4/14
  Time: 3:51 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@page contentType="text/html" pageEncoding="UTF-8" language="java" %>

<tiles:insertDefinition name="baseTemplate">

    <tiles:putAttribute name="title">
        <title>Сотрудники</title>
    </tiles:putAttribute>

    <tiles:putAttribute name="postLinks">
        <script src="js/dialog-rights.js"></script>
        <script src="js/dialog-register.js"></script>
        <script src="js/dialog_delete_employee.js"></script>
        <script src="js/dialog_edit_employee.js"></script>
    </tiles:putAttribute>

    <tiles:putAttribute name="selectedItem">
        <input type="hidden" id="menu_selected_item" value="menuitem_employees">
    </tiles:putAttribute>

    <tiles:putAttribute name="body">
        <div class="container" id="employees_container">

            <script type="text/javascript">
                var aSelected = [];
                var userActive;
                var oTable;
                $(document).ready(function () {

                    oTable = $('#employee_table').dataTable({
                        "bFilter": false,
                        "bInfo": false,
                        "bServerSide": true,
                        "sScrollY": "400px",
                        "sAjaxSource": "./a_employees",
                        "oLanguage": {
                            "sUrl": "./resources/datatables.russian.txt",
                            "sSearch": "Search all columns:"
                        },
                        "aoColumns": [

                            {"mData": "name"},
                            {"mData": "surname"},
                            {"mData": "patronymic"},
                            {"mData": "position"},
                            {"mData": "skype", "bSortable": false},
                            {"mData": "phone", "bSortable": false},
                            {"mData": "office"},
                            {"mData": "discharge", "bVisible": false}
                        ],
                        "fnServerParams": function (aoData) {
                            var disch = document.getElementById('checkB');
                            var dischCheck;
                            if (disch != null) {
                                dischCheck = disch.checked;
                            }
                            else
                                dischCheck = false;
                            aoData.push({
                                "name": "discharge",
                                "value": dischCheck
                            });
                        },
                        "fnRowCallback": function (nRow, aData, iDisplayIndex) {

                            if (oTable.fnGetData(nRow, 7) == true) {
                                $(nRow).css('background', 'lightblue');
                            }
                            nRow.onclick = function (e) {
                                $('#employee_table tbody tr').removeClass('row_selected');

                                var pNode = e.target;
                                while ('TR' != pNode.tagName) {
                                    pNode = pNode.parentNode;
                                }

                                var discharge = oTable.fnGetData(pNode, 7);
                                $(pNode).toggleClass('row_selected');

                                updateButt(discharge);
                            };
                        }
                    });
                });

                function updateButt(discharge)
                {
                    var ids = ['removeEmployee', 'editEmployee'];
                    for (var i = 0; i < 2; i++) {
                        var bt = document.getElementById(ids[i]);
                        if (bt != null)
                            bt.disabled = discharge;
                    }
                }

                function reloadTable() {
                    oTable.fnDraw();
                    updateButt(true);
                }
            </script>
            <br>
            <sec:authorize access="hasRole('ROLE_MANAGER')">
                <div>
                    <button id="addEmployee" class="button bg-green fg-white"
                            onclick="emplDataRedirect(false, 'Добавление сотрудника');"><i
                            class="icon-plus-2 on-left"></i>Добавить
                    </button>
                    <button disabled id="removeEmployee" class="button bg-darkRed fg-white"
                            onclick="deleteConfirmDialog()"><i class="icon-minus-2 on-left"></i>Уволить
                    </button>
                    <button disabled id="editEmployee" class="button bg-orange fg-white"
                            onclick="emplDataRedirect(true,'Редактирование сотрудника');"><i
                            class="icon-pencil on-left"></i>Редактировать
                    </button>
                    Уволенные
                    <input type="checkbox" id="checkB" onchange="reloadTable();"/>
                </div>
            </sec:authorize>

            <sec:authorize access="hasRole('ROLE_ADMIN')">
                <div>
                    <button disabled id="addAccountEmployee" class="button bg-green fg-white"
                            onclick="checkAndNewUser();"><i class="icon-plus-2 on-left"></i>Выдать аккаунт
                    </button>
                </div>
            </sec:authorize>
            <table id="employee_table" class="table striped hovered bordered dataTable">
                <thead>
                <tr role="row">
                    <th class="text-left">Имя</th>
                    <th class="text-left">Фамилия</th>
                    <th class="text-left">Отчество</th>
                    <th class="text-left">Должность</th>
                    <th class="text-left">Skype</th>
                    <th class="text-left">Телефон</th>
                    <th class="text-left">Офис</th>
                    <th class="text-left" hidden="hidden">Статус</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

        </div>
    </tiles:putAttribute>
</tiles:insertDefinition>
